<!-- Font Awesome CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/font-awesome.min.css'>
<!---Bootstrap CSS-->
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/datepicker.css'>
<!-- App CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-admin-belize.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-flat.css'>

<!--BootStrap JavaScript-->
<script src='/lib/bootstrap/js/bootstrap.min.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/jquery.bootstrap.wizard.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootbox.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-datepicker.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-typeahead.js' type="text/javascript"></script>

<script>

    var fromDate = $('#startDateSelect').datepicker().on('changeDate', function (ev) {
        $scope.startDateSelect = ev.date.format('yyyy-MM-dd');
        $("#startDateSelect").val(ev.date.format('yyyy-MM-dd'));
    });

    var toDate = $('#endDateSelect').datepicker().on('changeDate', function (ev) {
        $scope.endDateSelect = ev.date.format('yyyy-MM-dd');
        $("#endDateSelect").val(ev.date.format('yyyy-MM-dd'));
    });

    $(document).ready(function () {
        $("#myTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#sortTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("form input").keypress(function (e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                $('button[type=submit] .default').click();
                return false;
            } else {
                return true;
            }
        });
    });
</script>
<script src="/js/utility/FileSaver.min.js" type="text/javascript"></script>
<style>
    table td, table th {
        vertical-align: middle;
        height: 50px;
        text-align: center;
        font-size: 12px;
    }

    #all {
        background-color: #9cd053;
    }

    h2.title {
        display: block;
        margin: auto;
    }
</style>


<div>
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#main" ng-click="initMainPage()">Main</a></li>
        <li><a data-toggle="tab" href="#stats" ng-click="initStatsPage()">Stats</a></li>
        <li><a data-toggle="tab" href="#retention" ng-click="initRetentionPage()">Retention</a></li>
        <li><a data-toggle="tab" href="#dau" ng-click="initDauPage()">DAU</a></li>
    </ul>

    <div class="tab-content">

        <!--MAIN-->
        <div class="tab-pane active" id="main">

            <h2 class="title">Main</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">大区名称：</label>
                    <select ng-options="dis.objId as dis.groupName for dis in districtList"
                            ng-model="stats.district" ng-change="">
                        <option value="">-- 请选择大区 --</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="main.comm"
                            ng-change="getMainGraphs(main.comm, main.startDate, main.endDate)">
                        <option value="">全部</option>
                    </select><br/>

                    <div class="col-xs-1">
                        <label class="control-label">开始时间:</label>
                        <input type="text" id="startDate" data-provide="datepicker"
                               class="form-control datepicker" data-date-format="yyyy-mm-dd"
                               ng-model="main.startDate">
                    </div>
                    <div class="col-xs-1">
                        <label class="control-label">结束时间:</label>
                        <input type="text" id="endDate" data-provide="datepicker"
                               class="form-control datepicker" data-date-format="yyyy-mm-dd"
                               ng-model="main.endDate">
                    </div>
                    <button id="submitChart" type="submit" class="btn btn-primary"
                            ng-click="getMainGraphs(main.comm, main.startDate, main.endDate)">搜索
                    </button>
                    <button class="btn btn-secondary" ng-click="refreshMainGraphs()"><span
                            class="glyphicon glyphicon-refresh"></span></button>
                    <input style="zoom:1.2;margin-left: 10px;vertical-align:middle"
                           type="checkbox" checked
                           ng-click="mainRealUsersSwitch = !mainRealUsersSwitch; toggleMainRealUsers(main.startDate, main.endDate)"
                           ng-checked="mainRealUsersSwitch"/><span style="font-weight: bold">不包括400/500/600/700小号</span>
                    <!--  宝宝树66小区三次改造    mod   guo.xiaomin  20171009  start   -->
                    <!--  生成小区大使信息Excel -->
                    <!--<label class="left-margin">开始日期:</label>-->
                    <!--<input type="text" id="startDateSelect" class="modal-input" size="16" data-date-format="yyyy-mm-dd">-->
                    <!--<label class="left-margin">结束日期：</label>-->
                    <!--<input type="text" id="endDateSelect" class="modal-input" size="16" data-date-format="yyyy-mm-dd">-->
                    <!--<button id="submitModeratorManagerInfoData" type="submit" class="btn btn-primary"-->
                            <!--ng-click="exportModeratorManagerInfoData()">导出小区大使信息-->
                    <!--</button>-->
                    <!--  宝宝树66小区三次改造    mod   guo.xiaomin  20171009  end   -->
                </form>
            </div>
            <div>
                <span id="loadingMainText" style="color:red; text-align: center"></span>
            </div>
            <div>
                <table>
                    <thead></thead>
                    <tbody>
                    <tr ng-repeat="(commId, commName) in commsInGraph">
                        <td>{{commName}}</td>
                        <td>
                            <button class="glyphicon glyphicon-remove" ng-click="removeCommInGraphs(commId)"></button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="mainCharts" style="width: 100%">
                <!-- MAIN CHARTS HERE -->
            </div>
        </div>


        <!-- STATS -->
        <div class="tab-pane" id="stats">
            <h2 class="title">Stats</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">大区名称：</label>
                    <select ng-options="dis.objId as dis.groupName for dis in districtList"
                            ng-model="stats.district" id="option_dq"
                            ng-change="getCommsStatsInDistrict(stats.district, stats.date)">
                        <option value="">-- 请选择大区 --</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <label class="control-label">小区名称：</label>
                    <select ng-options="comm.objId as comm.communityName for comm in communityList"
                            ng-model="stats.community" id="option_xq"
                            ng-change='getCommStats(stats.community, stats.date)'>
                        <option value="">全部</option>
                    </select>

                    <button style="margin-left: 20px;" class="btn-secondary btn-sm"
                            ng-click="getAllCommStats(stats.date)">每个小区!
                    </button>
                    <button style="margin-left: 20px;" class="btn-secondary btn-sm"
                            ng-click="clearCommStats()">Clear All
                    </button>
                    <br/>

                    <label class="control-label">日期：</label>
                    <input type="text" ng-model="stats.date" style="" value="" placeholder="yyyy-MM-dd hh:mm:ss">
                    <button style="margin-left: 20px;" type="submit" class="btn-primary btn-sm"
                            ng-click="getCommStatsByDate(stats.date)">搜索
                    </button>
                    <br>

                    <ul class="nav nav-pills">
                        (新增 + 活跃度)
                        <li role="presentation"><a href="" ng-click="setDateInterval(stats.date, 7)"
                                                   data-toggle="tab">周</a></li>
                        <li role="presentation" class="active"><a href="" ng-click="setDateInterval(stats.date, 1)"
                                                                  data-toggle="tab">日</a>
                        </li>
                    </ul>
                    <input style="zoom:1.2;margin-left: 10px;vertical-align:middle"
                           type="checkbox" checked
                           ng-click="statsRealUsersSwitch = !statsRealUsersSwitch; toggleStatsRealUsers(stats.date)"
                           ng-checked="statsRealUsersSwitch"/><span
                        style="font-weight: bold">不包括400/500/600/700小号</span>

                </form>
            </div>
            <!--<button ng-click="printOut()">View Cache Status</button>-->

            <button ng-click="exportStatsData()">Export</button>
            <div id="exportable">
                <table class="table table-condensed">
                    <thead>
                    <tr id="sortTab">
                        <th>大区</th>
                        <th>小区</th>
                        <th>日期</th>
                        <th>
                            <a href="#" ng-click="orderByField='dateEffective'; reverseSort = !reverseSort">
                                DateEffective
                            <span ng-show="orderByField == 'dateEffective'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='users'; reverseSort = !reverseSort">
                                总用户数
                            <span ng-show="orderByField == 'users'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='newusers'; reverseSort = !reverseSort">
                                新增用户数
                            <span ng-show="orderByField == 'newusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='vusers'; reverseSort = !reverseSort">
                                总V用户数
                            <span ng-show="orderByField == 'vusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='newvusers'; reverseSort = !reverseSort">
                                新增V用户数
                            <span ng-show="orderByField == 'newvusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='question'; reverseSort = !reverseSort">
                                发布数
                            <span ng-show="orderByField == 'question'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='newquestion'; reverseSort = !reverseSort">
                                新增发布数
                            <span ng-show="orderByField == 'newquestion'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='questionusers'; reverseSort = !reverseSort">
                                发布人数
                            <span ng-show="orderByField == 'questionusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='newquestionusers'; reverseSort = !reverseSort">
                                新增发布人数
                            <span ng-show="orderByField == 'newquestionusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='replies'; reverseSort = !reverseSort">
                                回复数
                            <span ng-show="orderByField == 'replies'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='newreplies'; reverseSort = !reverseSort">
                                新增回复数
                            <span ng-show="orderByField == 'newreplies'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='repliesusers'; reverseSort = !reverseSort">
                                回复人数
                            <span ng-show="orderByField == 'repliesusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='newrepliesusers'; reverseSort = !reverseSort">
                                新增回复人数
                            <span ng-show="orderByField == 'newrepliesusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <a href="#" ng-click="orderByField='activeusers'; reverseSort = !reverseSort">
                                活跃用户
                            <span ng-show="orderByField == 'activeusers'">
                            <span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>
                        </th>
                        <th>
                            <!--<a href="#" ng-click="orderByField='dau'; reverseSort = !reverseSort">-->
                                活跃度
                            <!--<span ng-show="orderByField == 'dau'">-->
                            <!--<span ng-show="!reverseSort">^</span><span ng-show="reverseSort">v</span></span></a>-->
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="(comm, data) in commsInStats| object2Array | orderBy:orderByField:reverseSort">
                        <td>{{data.district}}</td>
                        <td>{{data.commName}}</td>
                        <td>{{data.date}}</td>
                        <td>{{data.dateEffective}}</td>
                        <td>{{data.users}}</td>
                        <td>{{data.newusers}}</td>
                        <td>{{data.vusers}}</td>
                        <td>{{data.newvusers}}</td>
                        <td>{{data.question}}</td>
                        <td>{{data.newquestion}}</td>
                        <td>{{data.questionusers}}</td>
                        <td>{{data.newquestionusers}}</td>
                        <td>{{data.replies}}</td>
                        <td>{{data.newreplies}}</td>
                        <td>{{data.repliesusers}}</td>
                        <td>{{data.newrepliesusers}}</td>
                        <td>{{data.activeusers}}</td>
                        <td>{{data.dau}}</td>
                        <td>
                            <button ng-click="removeCommInStats(comm)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- RETENTION -->
        <div class="tab-pane" id="retention">
            <h2 class="title">Retention</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">大区名称：</label>
                    <select ng-options="dis.objId as dis.groupName for dis in districtList"
                            ng-model="stats.district" ng-change="">
                        <option value="">-- 请选择大区 --</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <label class="control-label">小区名称：</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="retention.comm"
                            required ng-change="getRetentionGraphs(retention.comm)">
                        <option value="">全部</option>
                    </select>
                </form>
            </div>
            <div>
                <p>开始时间：<span id="retentionStart"></span>&nbsp;&nbsp;到：<span id="retentionEnd"></span></p>
                <span id="loadingRetentionText"></span>
                <!--<button class="btn btn-secondary" ng-click="refreshRetentionGraphs()"><span-->
                <!--class="glyphicon glyphicon-refresh"></span></button>-->
                <div>
                    <table>
                        <thead></thead>
                        <tbody>
                        <tr ng-repeat="(commId, commName) in commsInRetention">
                            <td>{{commName}}</td>
                            <td>
                                <button class="glyphicon glyphicon-remove"
                                        ng-click="removeCommInRetention(commId)"></button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div id="retentionCharts" style="width: 100%">
                    <!-- RETENTION CHARTS HERE -->
                </div>

                <!-- Retention Table -->
                <div style="margin-top: 100px">
                    <h3 style='font-weight: bold;' align="center">留存率</h3>

                    <div class="form-group" style="margin-top: 20px;">
                        <form>
                            <label class="control-label">小区名称：</label>
                            <select ng-options="m.objId as m.communityName for m in communityList" ng-model="ret.comm"
                                    ng-change="getCommRetentionTable(ret.interval, ret.comm, ret.startDate, ret.endDate)">
                                <option value="">全部</option>
                            </select></br>
                            <label class="control-label">Interval：</label>
                            <select ng-options="f for f in retentionIntervals" ng-model="ret.interval"
                                    ng-change="getCommRetentionTable(ret.interval, ret.comm, ret.startDate, ret.endDate)">
                            </select></br>
                            <div class="col-xs-1">
                                <label class="control-label">开始时间:</label>
                                <input type="text" data-provide="datepicker"
                                       class="form-control datepicker" data-date-format="yyyy-mm-dd"
                                       ng-model="ret.startDate">
                            </div>
                            <div class="col-xs-1">
                                <label class="control-label">结束时间:</label>
                                <input type="text" data-provide="datepicker"
                                       class="form-control datepicker" data-date-format="yyyy-mm-dd"
                                       ng-model="ret.endDate">
                            </div>
                            <button type="submit" class="btn btn-primary"
                                    ng-click="getCommRetentionTable(ret.interval, ret.comm, ret.startDate, ret.endDate)">
                                搜索
                            </button>
                        </form>
                    </div>

                    <!--<button ng-click="printOut()">View Cache Status</button>-->

                    <button ng-click="exportDailyRetTableData()">Export</button>

                    <div id="exportRetTable">
                        <span style='color:red' id="loadingRetTableText"></span>
                        <table class="table table-condensed">
                            <thead>
                            <tr>
                                <th>小区</th>
                                <th>首次使用时间</th>
                                <th>新增用户</th>
                                <th>1{{periodText}}后</th>
                                <th>2{{periodText}}后</th>
                                <th>3{{periodText}}后</th>
                                <th>4{{periodText}}后</th>
                                <th>5{{periodText}}后</th>
                                <th>6{{periodText}}后</th>
                                <th>7{{periodText}}后</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="(batchDate, data) in retTableDisplay">
                                <td>{{retTableCommName}}</td>
                                <td>{{batchDate}}</td>
                                <td style="font-weight: bold">{{data.total}}</td>
                                <td>{{data.period1}}</td>
                                <td>{{data.period2}}</td>
                                <td>{{data.period3}}</td>
                                <td>{{data.period4}}</td>
                                <td>{{data.period5}}</td>
                                <td>{{data.period6}}</td>
                                <td>{{data.period7}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>


        <!-- DAU -->
        <div class="tab-pane" id="dau">
            <h2 class="title">DAU</h2>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">大区名称：</label>
                    <select ng-options="dis.objId as dis.groupName for dis in districtList"
                            ng-model="dau.district" id=""
                            ng-change="getCommsDauInDistrict(dau.district)">
                        <option value="">-- 请选择大区 --</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;
                    <label class="control-label">小区名称：</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="dau.comm"
                            required ng-change="getDauGraphs(dau.comm)">
                        <option value="">全部</option>
                    </select></br>
                </form>
            </div>
            <div>
                <p>开始时间：<span id="dauStart"></span>&nbsp;&nbsp;到：<span id="dauEnd"></span></p>
                <span id="loadingDauText" style="color:red"></span>
                <!--<button class="btn btn-secondary" ng-click="refreshDauGraphs()"><span-->
                <!--class="glyphicon glyphicon-refresh"></span></button>-->
                <input style="zoom:1.2;margin-left: 10px;vertical-align:middle"
                       type="checkbox" checked
                       ng-click="dauRealUsersSwitch = !dauRealUsersSwitch; toggleDauRealUsers()"
                       ng-checked="dauRealUsersSwitch"/><span style="font-weight: bold">不包括400/500/600/700小号</span>
                <button ng-click="exportDauData()">Export</button>

                <div ng-show="false">
                    <div id="exportDauTable">
                        <table class="table table-condensed">
                            <thead>
                            <tr>
                                <th>Interval</th>
                                <th>小区</th>
                                <th>
                                    日期
                                    <span ng-show="orderByFieldDau == 'date'"></span>
                                </th>
                                <th>总用户</th>
                                <th>活跃用户</th>
                                <th>活跃度</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="data in dauTableDisplay|orderBy:orderByFieldDau:reverseSortDau">
                                <td>{{data.period}}</td>
                                <td>{{data.comm}}</td>
                                <td>{{data.date}}</td>
                                <td>{{data.users}}</td>
                                <td>{{data.active}}</td>
                                <td>{{data.activerate}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="exportWauTable">
                        <table class="table table-condensed">
                            <thead>
                            <tr>
                                <th>Interval</th>
                                <th>小区</th>
                                <th>
                                    日期
                                    <span ng-show="orderByFieldDau == 'date'"></span>
                                </th>
                                <th>总用户</th>
                                <th>活跃用户</th>
                                <th>活跃度</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="data in wauTableDisplay|orderBy:orderByFieldDau:reverseSortDau">
                                <td>{{data.period}}</td>
                                <td>{{data.comm}}</td>
                                <td>{{data.date}}</td>
                                <td>{{data.users}}</td>
                                <td>{{data.active}}</td>
                                <td>{{data.activerate}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="exportMauTable">
                        <table class="table table-condensed">
                            <thead>
                            <tr>
                                <th>Interval</th>
                                <th>小区</th>
                                <th>
                                    日期
                                    <span ng-show="orderByFieldDau == 'date'"></span>
                                </th>
                                <th>总用户</th>
                                <th>活跃用户</th>
                                <th>活跃度</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="data in mauTableDisplay|orderBy:orderByFieldDau:reverseSortDau">
                                <td>{{data.period}}</td>
                                <td>{{data.comm}}</td>
                                <td>{{data.date}}</td>
                                <td>{{data.users}}</td>
                                <td>{{data.active}}</td>
                                <td>{{data.activerate}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div>
                    <table>
                        <thead></thead>
                        <tbody>
                        <tr ng-repeat="(commId, commName) in commsInDau">
                            <td>{{commName}}</td>
                            <td>
                                <button class="glyphicon glyphicon-remove"
                                        ng-click="removeCommInDau(commId)"></button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="dauCharts" style="width: 100%">
                    <!-- DAU CHARTS HERE -->
                </div>
            </div>
        </div>

    </div>

</div>